<template>
	<view>
		<navbar title="我的接单" :isBack="false"></navbar>
		<view class="fixed-top-wrapper">
			<view class="fixed-top-box">
				<view class="type-wrapper">
					<view class="type-box fa">
						<view class="type-list fa jcc" :class="{active: typeIndex == index}" v-for="(item, index) in typeList" :key="index" @click="typeChange(index)">
							<view class="pick-icon" :class="{active: typeIndex == index}"></view>
							<view>{{item}}</view>
						</view>
					</view>
				</view>
				<view class="state-box fa">
					<view class="state-list fa jcc" :class="{active: stateIndex == index}" v-for="(item, index) in stateList" :key="index" @click="stateChange(index)">{{item}}</view>
				</view>
			</view>
			<view class="fixed-top-place"></view>
		</view>
		<view class="main pr">
			<view class="order-box" v-if="list.length > 0">
				<view class="order-list" v-for="(item, index) in list" :key="index" @click="utils.navTo('/pages/order/order_detail', {id: item.ordersId})">
					<view class="title flex jcsb">
						<view class="name" v-if="item.type == 1">{{item.secondType == 0 ? '帮取' : '帮送'}}</view>
						<view class="time flex1 fa">
							<view>{{item.type == 0 ? '配送时间' : item.secondType == 0 ? '收货时间' : '发货时间'}}：</view>
							<view class="flex1 fa">
								<view style="margin-right: 10rpx;">{{item.day}}</view>
								<view>{{item.receivingTime}}</view>
								<view>~</view>
								<view>{{item.receivingEndTime}}</view>
							</view>
						</view>
					</view>
					<view class="address-wrapper">
						<view class="address-list flex" v-if="typeIndex == 1">
							<image class="receive-icon" src="../../static/fetch2.png" mode=""></image>
							<view class="flex1">
								<view class="address">{{item.fetchEstate}}{{item.fetchBuilding}}{{item.fetchDetails}}</view>
								<view class="contact">{{item.fetchName}}</view>
							</view>
						</view>
						<view class="address-list flex">
							<image class="receive-icon2" src="../../static/receive2.png" mode="" v-if="typeIndex == 1"></image>
							<image class="receive-icon" src="../../static/receive.png" mode="" v-if="typeIndex == 0"></image>
							<view class="flex1">
								<view class="address">{{item.sendEstate}}{{item.sendBuilding}}号楼{{item.sendDetails}}</view>
								<view class="contact">{{item.sendName}}</view>
							</view>
						</view>
					</view>
					<view class="remark" v-if="item.type == 1">
						<view>特殊要求：{{item.specialMemo || '无'}}</view>
						<view>备注：{{item.memo || '无'}}</view>
					</view>
					<view class="operate-box fa jcsb" v-if="item.state == 2 || typeIndex == 0">
						<view class="price" v-if="typeIndex == 0">￥{{item.money}}</view>
						<view v-if="typeIndex == 1"></view>
						<view class="operate-btn" @click.stop="shopSend(item.ordersId)" v-if="typeIndex == 0 && item.state == 2">已送达</view>
						<view class="operate-btn" @click.stop="hasSend(item.ordersId)" v-if="typeIndex == 1 && item.state == 2">确认收货</view>
					</view>
				</view>
			</view>
			<view class="noorder-box fa fdc" v-if="nodata">
				<image class="noorder-image" src="../../static/noorder.png" mode=""></image>
				<view class="prompt">暂无订单</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :mask-click="true" border-radius="10px 10px 0 0">
			<view class="code-wrapper fa fdc">
				<view class="title">订单收货码</view>
				<input class="fill-box" type="text" placeholder="请输入" v-model="code" />
				<view class="code-btn" @click="sendConfirm">确认</view>
				<image class="close-icon" src="../../static/close.png" mode="" @click="closeCodePop"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				typeList: ['商城订单', '取送订单'],
				typeIndex: 0,
				stateList: ['全部', '进行中', '已完成'],
				stateIndex: 0,
				page: 1,
				count: 0,
				list: [],
				nodata: 0,
				id: '',
				code: '', //收货码
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.page = 1
			this.count = 0
			this.list = []
			this.getList()
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.page = 1
				this.count = 0
				this.list = []
				this.getList()
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			typeChange(index) {
				this.typeIndex = index
				this.stateIndex = 0
				this.getList()
			},
			stateChange(index) {
				this.stateIndex = index
				this.getList()
			},
			// 获取订单列表
			getList() {
				this.nodata = 0
				let state = ''
				if(this.stateIndex == 0) {
					state = ''
				}else {
					state = Number(this.stateIndex) + 1
				}
				this.api.hallListFunc({
					isReceive: 1,
					type: this.typeIndex,
					state: state,
					pageNum: this.page
				}).then(res => {
					if(res.code == 200) {
						this.count = res.total
						this.list = this.page == 1 ? res.rows : this.list.concat(res.rows)
						this.nodata = this.list.length > 0 ? 0 : 1
						this.list.forEach(item => {
							item.today = item.day.substr(5, 2) + '.' + item.day.substr(8, 2)
						})
					}
				})
			},
			closeCodePop() {
				this.$refs.popup.close()
			},
			shopSend(id) {
				uni.showModal({
					title: '提示',
					content: this.typeIndex == 0 ? '是否确认送达' : '是否确认收货',
					success: result => {
						if(result.confirm) {
							this.api.orderOverFunc({
								ordersId: id
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: this.typeIndex == 0 ? '已确认送达' : '已确认收货'
									})
									this.getList()
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			hasSend(id) {
				this.id = id
				this.$refs.popup.open()
			},
			sendConfirm() {
				if(!this.code) return uni.showToast({
					title: '请输入收货码',
					icon: 'none'
				})
				this.$refs.popup.close()
				uni.showModal({
					title: '提示',
					content: this.typeIndex == 0 ? '是否确认送达' : '是否确认收货',
					success: result => {
						if(result.confirm) {
							this.api.orderOverFunc({
								ordersId: this.id,
								code: this.code
							}).then(res => {
								this.code = ''
								if(res.code == 200) {
									uni.showToast({
										title: this.typeIndex == 0 ? '已确认送达' : '已确认收货'
									})
									this.getList()
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
								this.code = ''
							})
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.fixed-top-wrapper{
		.fixed-top-box{
			position: fixed;
			left: 0;
			right: 0;
			height: 176rpx;
			z-index: 999;
			background-color: #fff;
			.type-wrapper{
				padding: 0 28rpx;
				height: 88rpx;
				.type-box{
					padding: 0 4rpx;
					height: 68rpx;
					border-radius: 34rpx;
					background-color: var(--bodybg);
					.type-list{
						flex: 1;
						height: 60rpx;
						border-radius: 30rpx;
						color: #777;
						.pick-icon{
							margin-right: 14rpx;
							width: 16rpx;
							height: 16rpx;
							border-radius: 8rpx;
							background-color: #DFDFDF;
						}
						&.active{
							font-weight: bold;
							color: #333;
							background-color: #fff;
							.pick-icon{
								background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
							}
						}
					}
				}
			}
			.state-box{
				height: 88rpx;
				.state-list{
					position: relative;
					flex: 1;
					height: 88rpx;
					font-size: 28rpx;
					color: #666;
					&.active{
						font-size: 30rpx;
						color: #000;
						&::after{
							content: '';
							position: absolute;
							bottom: 0;
							left: 50%;
							transform: translateX(-50%);
							width: 50rpx;
							height: 6rpx;
							border-radius: 4rpx;
							background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
						}
					}
				}
			}
		}
		.fixed-top-place{
			height: 176rpx;
		}
	}
	.order-box{
		padding: 30rpx 28rpx 10rpx;
		background-color: var(--bodybg);
		.order-list{
			margin-bottom: 20rpx;
			padding: 24rpx 20rpx 32rpx;
			border-radius: 24rpx;
			background: #fff;
			box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(204,204,204,0.25);
			.title{
				padding-bottom: 24rpx;
				border-bottom: 2rpx solid #eee;
				.name{
					padding: 0 14rpx;
					height: 40rpx;
					line-height: 40rpx;
					border-radius: 8rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #18C954;
					background-color: #E7F4EA;
				}
				.time{
					margin-left: 14rpx;
					font-size: 24rpx;
				}
			}
			.address-wrapper{
				padding-top: 20rpx;
				border-radius: 16rpx;
				background-color: #fff;
				.address-list{
					position: relative;
					margin-bottom: 33rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.receive-icon{
						margin-right: 10rpx;
						width: 46rpx;
						height: 40rpx;
					}
					.receive-icon2{
						margin-right: 10rpx;
						width: 46rpx;
						height: 46rpx;
					}
					.address{
						font-size: 30rpx;
						font-weight: bold;
					}
					.contact{
						margin-top: 2rpx;
						font-size: 24rpx;
						color: #999;
						line-height: 28rpx;
					}
				}
			}
			.remark{
				margin-top: 24rpx;
				padding: 20rpx;
				border-radius: 4rpx;
				background-color: #F1F1F9;
			}
			.operate-box{
				margin-top: 26rpx;
				padding-top: 26rpx;
				border-top: 2rpx solid #eee;
				.price{
					font-size: 30rpx;
					font-weight: bold;
					color: #FE3134;
				}
				.operate-btn{
					padding: 0 56rpx;
					height: 64rpx;
					line-height: 64rpx;
					border-radius: 32rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #fff;
					background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
				}
			}
		}
	}
	.noorder-box{
		margin-top: 206rpx;
		.noorder-image{
			width: 464rpx;
			height: 253rpx;
		}
		.prompt{
			font-size: 22rpx;
			color: #777;
		}
		.noorder-btn{
			margin-top: 80rpx;
			padding: 0 80rpx;
			height: 72rpx;
			line-height: 72rpx;
			border: 2rpx solid #18C954;
			border-radius: 36rpx;
			color: #18C954;
		}
	}
	.code-wrapper{
		position: relative;
		padding: 52rpx 52rpx 62rpx;
		box-sizing: border-box;
		border-radius: 22rpx;
		background-color: #fff;
		.title{
			font-size: 36rpx;
		}
		.fill-box{
			margin-top: 46rpx;
			padding: 0 48rpx;
			box-sizing: border-box;
			width: 506rpx;
			height: 122rpx;
			border-radius: 16rpx;
			background-color: #F5F5F5;
		}
		.code-btn{
			margin-top: 64rpx;
			width: 254rpx;
			height: 92rpx;
			line-height: 92rpx;
			border-radius: 46rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			background: linear-gradient( 270deg, #6CE083 0%, #3DBF63 100%);
		}
		.close-icon{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
